<template>
  <div class="login">
    <div class="img-box">
      <img alt="Vue logo" src="../assets/logo.png" />
    </div>
    <div class="loginitem">
      <el-form ref="form" :model="form" label-width="80px">
        <el-input v-model="form.username"></el-input>
        <el-input type="password" v-model="form.password"></el-input>
        <el-form-item>
          <el-button type="primary" @click="add">登陆</el-button>
          <el-button type="info" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {getLogin} from '../utils/api' //引入登陆接口
export default {
  data() {
    return {
      form: {
        username: "", //用户名
        password: "", //密码
      },
    };
  },
  methods: {
    add() {//登陆
    getLogin(this.form).then(res=>{
        console.log(res);
        if(res.data.meta.status==400){
             this.$message({
            type: 'success', // success error warning
            message: res.data.meta.msg,
            duration: 2000,
        })
        }else{
              let token =res.data.data.token
        // 将token存到本地存储
        localStorage.setItem('token', token)
        if(localStorage.getItem("token")){ //判断本地有没有token
            this.$router.push('/Admin' )
            this.$message({
                type: 'success', // success error warning
                message: '登陆成功！',
                duration: 2000,
            })
        }
        }
      
    })
    },
    clear() {//重置
      (this.form.username = ""),
      (this.form.password = "");
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh; //浏览器可视高度
  background-color: #2b4b6b;
  overflow: hidden;
  position: relative; //相对定位
  .img-box {
    z-index: 111;
    width: 150px;
    height: 150px;
    background-color: #efefef;
    position: absolute; //绝对定位
    top: 100px;
    left: 670px;
    border: 10px solid #ffffff;
    border-radius: 50%;
    img {
      overflow: hidden;
      margin: 10px;
      width: 130px;
      height: 130px;
    }
  }
  .loginitem {
    position: absolute;
    top: 130px;
    left: 500px;
    width: 500px;
    height: 350px;
    margin: 50px auto;
    padding: 100px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    .el-form {
      position: absolute;
      top: 130px;
      left: 50px;
      .el-input {
          padding: 15px 0;
      }
    }
  }
}
</style>